今天來新增修改資料的頁面!
別忘記啟動虛擬環境
進入 core/views.py 加入以下程式碼:
# 其他程式碼
def update(request, pk):
user = get_object_or_404(get_user_model(), pk=pk)
if request.method == 'POST':
user.email = request.POST['email']
user.name = request.POST['username']
user.save()
return redirect('core:profile', pk=user.pk)
return render(request, 'core/update.html')
基本上就是把 user 的資料拿出來,並賦予使用者請求中的新資料,然後儲存。接著到 core/urls.py 增加 path:
```python
urlpatterns = [
# 其他程式碼
path('update/<int:pk>', views.update, name='update'),
]
最後到 core/templates/core 新增update.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Update Profile</title>
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.15/dist/tailwind.min.css" rel="stylesheet">
</head>
<body class="bg-gray-900 text-white min-h-screen flex items-center justify-center">
<div class="bg-gray-800 p-8 rounded shadow-md w-full max-w-sm">
<h1 class="text-2xl font-semibold mb-4">Update Profile</h1>
<form method="post" class="space-y-4">
{% csrf_token %}
<div>
<label for="email" class="block text-gray-300">Email:</label>
<input type="email" id="email" name="email" required
class="w-full px-4 py-2 border rounded-md bg-gray-700 text-white focus:outline-none focus:border-blue-500">
</div>
<div>
<label for="username" class="block text-gray-300">Username:</label>
<input type="text" id="username" name="username" required
class="w-full px-4 py-2 border rounded-md bg-gray-700 text-white focus:outline-none focus:border-blue-500">
</div>
<button type="submit" formaction="{% url 'core:update' user.pk %}"
class="w-full bg-blue-500 text-white py-2 px-4 rounded-md hover:bg-blue-600">
Update
</button>
</form>
</div>
</body>
</html>
這邊 update 按鈕一樣使用{% url %}
的模板標籤,不過在後方要加入user.pk
,才能正確傳送。別忘了在 profile 頁面也有一個地方要修改:
<div class="mt-4">
<!-- 新增 url tag -->
<a href="{% url 'core:update' user.pk %}" class="bg-blue-500 text-white py-2 px-4 rounded-md hover:bg-blue-600">Modify</a>
<a href="#" class="bg-red-500 text-white py-2 px-4 rounded-md hover:bg-red-600 ml-2">Logout</a>
</div>
都完成後,發現登出按鈕的網址還是個#
那就來實作登出功能吧!
登入及登出功能在 Django 中有內建的 class 可以使用,分別為LoginView
及LogoutView
,所以有些情況下可以不用自己製作。現在就使用現成的LogoutView
來實作登出功能!首先到 core/urls.py 中導入LogoutView
並新增以下 path:
from django.contrib.auth.views import LogoutView
# 其他導入及程式碼
urlpatterns = [
# 其他 path
path('logout/', LogoutView.as_view(), name='logout')
]
這邊因為是使用 class based view,所以要使用as_view()
來正確連接,接著到 app/settings.py 指定 LOGOUT_REDIRECT_URL 以覆蓋原本的預設值:
# 其他程式碼
LOGOUT_REDIRECT_URL = 'core:signup'
這邊指定回到登入頁面,更多資料可以參考:
都完成後,輸入python manage.py runserver
看看成果並測試吧~
到這邊這個專案算是告一段落了,雖然很簡單,但是基本的新增、修改、讀取功能都有實現,很多網頁的設計都需要 CRUD 功能,因此這個算是基礎中的基礎。接著來優化一下網頁,下次見~